/**
 * bufferImg.js - 实现一个HTTP服务，响应包含base64编码图片数据的HTML
 * 任务3：
 * 1. 创建 bufferImg.js 文件 (此处为 3.js)
 * 2. 创建服务，监听 8081 端口，当从浏览器端发起请求时，
 *    localhost:8081/，服务器端响应 HTML 代码到浏览器。
 * 3. 服务端响应的 HTML 代码中包含一张图片，该图片数据为 data-Uri 数据，
 *    即 buffer 的 base64 编码的图片数据。
 */

const http = require('http');

// 任务3：准备一张图片的 base64 编码数据
// 这里使用一个非常小的 1x1 像素的透明 GIF 图片的 base64 编码
// 
const base64Image = 'R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
const imageDataUri = `data:image/gif;base64,${base64Image}`;

// 任务2：创建服务，监听 8081 端口
const server = http.createServer((req, res) => {
    // 检查请求路径是否为根路径
    if (req.url === '/') {
        // 设置响应头，告知浏览器响应内容是 HTML
        res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });

        // 构建包含 Data URI 图片的 HTML 字符串
        const htmlContent = `
            <!DOCTYPE html>
            <html lang="zh-CN">
            <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>Base64 Image Example</title>
                <style>
                    body { font-family: Arial, sans-serif; text-align: center; margin-top: 50px; }
                    img { border: 1px solid #ccc; padding: 5px; background-color: #f9f9f9; }
                </style>
            </head>
            <body>
                <h1>服务器响应的图片</h1>
                <p>这张图片是使用 Data URI 嵌入在 HTML 中的：</p>
                <img src="${imageDataUri}" alt="Base64 Embedded Image" width="50" height="50">
                <p>这是一个 50x50 像素的透明 GIF 示例。</p>
            </body>
            </html>
        `;

        // 发送 HTML 响应
        res.end(htmlContent);
    } else {
        // 对于其他路径，响应 404 Not Found
        res.writeHead(404, { 'Content-Type': 'text/plain; charset=utf-8' });
        res.end('404 Not Found');
    }
});

const port = 8081;

server.listen(port, () => {
    console.log(`服务已启动，监听端口 ${port}`);
    console.log(`请在浏览器中访问: http://localhost:${port}/`);
});
